<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item class="ss" label="关键字搜索:">
          <el-input v-model="pageQuery.spuName" size="mini" placeholder="请输入酒名" />
        </el-form-item>
        <!-- 酒品类： -->
          <el-form-item class="ss" label="酒品类查询：">
            <div class="part-form-item">
              <div class="classify-show">
                <category-group :selected-categorys="selectedShopCategorys"
                  :show-category-select-btn="showShopCategorySelectBtn" :single="true"
                  @selectOrReviseCategory="selectOrReviseCategory('shop')" />
              </div>
              <category-selector v-if="categorySelectorVisible" ref="categorySelector"
                @getCategorySelected="getCategorySelected" />
            </div>
          </el-form-item>
        <el-form-item class="ss" label="酒品牌:">
          <el-input v-model="pageQuery.brandName" size="mini" placeholder="请输入酒品牌" />
        </el-form-item>
        <div>
          <el-form-item style="display: block;">
            <el-button size="small" @click="reset()">重置</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
          </el-form-item>
          <div style="margin-left: 90%;">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="enterHot()">录入特惠</el-button>
          </div>
        </div>

      </el-form>
    </div>

    <!-- 列表相关区域 -->
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
      <!-- 序号 -->
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <!-- 酒品牌 -->
      <el-table-column label="酒品牌" align="center">
        <template slot-scope="{row}">
          <span>{{ row.brandName }}</span>
        </template>
      </el-table-column>
      <!-- 酒品类 -->spuName
      <el-table-column label="酒品类" align="center">
        <template slot-scope="{row}">
          <span>{{ row.categoryName }}</span>
        </template>
      </el-table-column>
      <!-- 酒名 -->
      <el-table-column label="酒名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.spuName }}</span>
        </template>
      </el-table-column>
      <!-- 规格 -->
      <el-table-column label="规格" align="center">
        <template slot-scope="{row}">
          <span>{{ row.skuName }}</span>
        </template>
      </el-table-column>
      <!-- 成本价 -->
      <el-table-column label="成本价" align="center">
        <template slot-scope="{row}">
          <span>{{ row.marketPriceFee/100}}</span>
        </template>
      </el-table-column>
      <!-- 原售卖价 -->
      <el-table-column label="原售卖价" align="center">
        <template slot-scope="{row}">
          <span>{{ row.priceFee/100}}</span>
        </template>
      </el-table-column>
      <!-- 特惠价 -->
      <el-table-column label="特惠价" align="center">
        <template slot-scope="{row}">
          <span>{{ row.price/100 }}</span>
        </template>
      </el-table-column>
      <!-- 剩余限量库存 -->
      <el-table-column label="剩余限量库存" align="center">
        <template slot-scope="{row}">
          <span>{{ row.spuStock }}</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.status==-1">已下架</span>
          <span v-if="row.status==0">未上架</span>
          <span v-if="row.status==1">已上架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.status==0" @click="change_status(row.status=1,row.hotSaleId)" type="text">
            上架
          </el-button>
          <el-button v-if="row.status==1" @click="change_status(row.status=-1,row.hotSaleId)" type="text">
            下架
          </el-button>
          <el-button @click="hotsaleDetail(row.hotSaleId)" type="text">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
  import * as api from '@/api/product/hot-sale'
  import Pagination from '@/components/Pagination'
  import categorySelector from '@/components/CategorySelector'
  import categoryGroup from '@/components/CategoryGroup'

  export default {
    name: '',
    components: {
      Pagination,
      categorySelector,
      categoryGroup
    },
    data() {
      return {
        selectedShopCategorys: [], // 选中的店铺分类
        showShopCategorySelectBtn: true, // 店铺'选择分类'按钮显隐
        categorySelectorVisible: false, // 分类选择器弹窗显隐
        categoryName:null,
        // 查询的参数
        pageQuery: {
          pageSize: 10,
          pageNum: 1,
          spuName:null,
          categoryId:null,
          brandName:null
        },
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0 // 一共多少页
        },
        // loading
        pageLoading: true,
        // 查询参数
        searchParam: {},
        addOrUpdateVisible: false
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      //详情
      hotsaleDetail(hotSaleId){
        this.$router.push({
          path: '/hotsale/hotsaleDetail',
          query: {
            hotSaleId: hotSaleId
          }
        })
      },
      init() {
        const spuId = this.dataForm.spuId
        this.dataForm.spuId = spuId || ''
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (!this.dataForm.spuId) {
            return
          }
          api.getProdInfoPage(spuId).then(data => {
            console.log('获取data:', data)
            this.dataForm = data
            this.originalSpuAttrValueList = data.spuAttrValues
            this.backTotalStock = data.skus.reduce((res, {
              stock
            }) => {
              res += (stock || 0)
              return res
            }, 0)
            // 回显分类
            this.getCategoryBack(data.categoryId, data.shopCategoryId)
            // 商品分类选择按钮
            this.showCategorySelectBtn = false
            if (data.brand?.imgUrl) {
              const img = data.brand.imgUrl
              if (img.indexOf('http://') === 0 || img.indexOf('https://') === 0) {
                this.brandImgUrl = img
              } else {
                this.brandImgUrl = this.resourcesUrl + img
              }
            }
            this.brandName = data.brand?.name // 品牌名字
            // 根据分类获取基本属性列表
            this.getAttrsByCategoryId(data.categoryId, data.spuAttrValues)
            // sku回显
            this.skuBackShow(data.shopCategoryId, data.skus) // 销售属性
          })
        })
      },
      /**
       * 选择/修改分类
       */
      selectOrReviseCategory(key) {
        this.selectKey = key
        this.categorySelectorVisible = true
        this.$nextTick(() => {
          this.$refs.categorySelector.init(0, key) // 1代表从创建分类进入
        })
      },
      /**
       * 获取子组件返回分类数据
       */
      getCategorySelected(selectedCategorys, parentId) {
        this.categoryName = selectedCategorys[2]
        this.pageQuery.categoryId = parentId
        this.categorySelectorVisible = false
        if (this.selectKey === 'platform') {
          this.selectedCategorys = selectedCategorys
          // this.dataForm.categoryId = parentId
          this.getAttrsByCategoryId(parentId) // 请求基本属性
        } else {
          this.selectedShopCategorys = selectedCategorys
          // this.dataForm.shopCategoryId = parentId
          this.querySalesAttrData() // 请求销售属性
        }

      },
      // 上下架
      change_status(status,hotSaleId){
        api.change_status({
          status:status,
          hotSaleId:hotSaleId
        }).then(data =>{
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000
          })
        })
      },
      //录入特惠
      enterHot() {
        this.$router.push({
          path: '/hot-sale/enterHotsale'
          // query: {
          //   shopTurnoverId: shopTurnoverId
          // }
        })
      },
      //获取表格序号
      getIndex(index) {
        return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + index + 1
      },

      // 重置
      reset() {
        this.pageQuery.spuName = null
        this.pageQuery.categoryId = null
        this.pageQuery.brandName = null
        this.categoryName = null
        this.getPage()
      },
      getPage() {
        this.pageLoading = true
        api.page({
          ...this.pageQuery,
          ...this.searchParam
        }).then(pageVO => {
          this.pageVO = pageVO
          this.pageLoading = false
        })
      },

      // 刷新回调用
      refreshChange() {
        this.page = this.$refs.crud.$refs.tablePage.defaultPage
        this.getPage(this.page)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filter-container {
    display: block;
    padding: 20px;
    background: #f8f8f9;
    margin-bottom: 20px;
    .ss{
      margin-right: 40px;
    }
  }
  .el-form-item__content{
    line-height: 0;
  }
  ::v-deep .change-classify{
    margin-left: 5px !important;
  }
  ::v-deep .category-sel1 {
    font-size: 16px;
    font-weight: bold;
    background-color: #f3f3f3;
    height: 34px;
    line-height: 29px !important;

    span {
      padding: 0 3px;
    }
  }
</style>
